<template>
    <div class="usercenter">
        <ul class="list-item">
            <li v-for="(item, index) in addressList" :key="index">
                <div>
                    <p class="text">{{item.consignee}} <span class="light-grey font-24">{{item.phoneNumber}}</span></p>
                    <p class="font-24">
                        <span class="default" v-if="item.isDefault">默认</span>
                        {{item.province + item.city + item.region + item.detailAddress}}
                    </p>
                </div>
                <div>
                    <p class="light-grey font-24" style="margin-bottom:12px" @click="editAddress(item, index)">编辑</p>
                    <p class="light-grey font-24" @click="deleteAddress(item, index)">删除</p>
                </div>
            </li>
        </ul>
        <div class="btn"  @click="editAddress">
            <p>+添加地址</p>
        </div>
    </div>
</template>
<script>
  import {getAllAddress, delAddress} from '_common/services/address'
  export default {
    data() {
      return {
        addressList: []
      }
    },
    computed: {},
    created(){
      this.getAll()
    },
    methods: {
      deleteAddress (item, index) {
        this.$confirm('确定删除该地址?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delAddress(item.addressId).then(res => {
            if (res && res.code === 0) {
              if (index >= 0) {
                this.addressList.splice(index, 1)
                this.$alertTip('删除成功')
              }
            }
            else {
              this.$alertTip(res.msg || '获取失败，请稍后再试')
            }
          }, reject => {
            this.$alertTip('获取失败，请稍后再试')
          })
        }).catch(() => {});
      },
      editAddress (item = {}) {
        this.$openRouter({
          query: {
            addressId: item ? item.addressId : ''
          },
          name: 'add'
        })
      },
      getAll () {
        getAllAddress().then(res => {
          if (res && res.code === 0) {
            this.addressList = res.data
          }
          else {
            this.$alertTip(res.msg || '获取失败，请稍后再试')
          }
        }, reject => {
          this.$alertTip('获取失败，请稍后再试')
        })
      }
    },
    components: {}
  }
</script>
<style lang="less">
    @import "../../css/common";
    @import "../../css/commonlayout";

    .usercenter {
        .list-item {
            li {
                border-bottom: none;
            }
        }
    }
    .text {
        font-size: 32px;
        margin-bottom: 10px;
    }
    .btn{
        background-color: #fff;
        text-align: center;
        font-size: 34px;
        line-height: 88px;
        margin-top:80px;
    }
</style>